<template>
  <div class="page">
    <swiper class='swpier-wrap' ref="bannerSwiper" :options="bannerOptions">
      <swiper-slide v-for="(item,index) in details.images" :key="index">
        <img :src="item">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class='goods-ele-main'>
      <div class='goods-title'>{{details.title}}</div>
      <div class='price'>¥{{details.price}}</div>
      <ul class='sales-wrap'>
        <li>快递：{{details.freight}}元</li>
        <li>月销量{{details.sales}}件</li>
      </ul>
    </div>
    <div class='reviews-main'>
      <div class="reviews-title">商品评价（{{totalReviews}}）</div>
      <div v-if="reviews.length>0">
        <div class='reviews-wrap'>
          <div class='reviews-list' v-for="(item,index) in reviews" :key="index">
            <div class='uinfo'>
              <div class='head'><img alt="" v-lazy="item.head"/></div>
              <div class='nickname'>{{item.nickname}}</div>
            </div>
            <div class='reviews-content' v-html="item.content"></div>
            <div class='reviews-date'>{{item.times}}</div>
          </div>
        </div>
        <div class='reviews-more' @click="$router.replace({name:'goods-review',query:{gid: gid}})">
          查看更多评价
        </div>
      </div>
      <div class="no-data" v-else>暂时没有评价！</div>

    </div>
    <div class='bottom-btn-wrap'>
      <div class='btn fav' @click="addFav">收藏</div>
      <div class='btn cart' @click="showPanpel">加入购物车</div>
    </div>
    <div class='mask' v-show="isPanel" @click="closePanpel"></div>
    <div ref="cart-panel" class="cart-panel" :class="[isPanel? 'up': 'down']">
      <div ref="goods-info" class='goods-info'>
        <div class='close-panel-wrap'>
          <div class='spot'></div>
          <div class="line"></div>
          <div class='close' @click="closePanpel"></div>
        </div>
        <div ref="goods-img" class='goods-img'>
          <img v-lazy="details.images && details.images[0]" alt=""/>
        </div>
        <div class='goods-wrap'>
          <div class='goods-title'>{{details.title}}</div>
          <div class='price'>¥{{details.price}}</div>
          <div class='goods-code'>商品编码:{{details.gid}}</div>
        </div>
      </div>
      <div class='attr-wrap'>
        <div class='attr-list' v-for="(item,index) in attrs" :key="index">
          <div class='attr-name'>{{item.title}}</div>
          <div class='val-wrap'>
            <span class="val" :class="{active:item2.active}" v-for="(item2,index2) in item.values" :key="index2"
                  @click="selectAttrs(index,index2)">{{item2.value}}</span>
          </div>
        </div>
      </div>
      <div class='amount-wrap'>
        <div class='amount-name'>购买数量</div>
        <div class="amount-input-wrap">
          <div class="btn dec" :class="{active:count<=1}" @click="count>1 && count--">-</div>
          <div class='amount-input'><input type="text" v-model="count" @input="setCount($event)"/></div>
          <div class='btn inc' @click="count++">+</div>
        </div>
      </div>
      <div class="sure-btn" @click="sureSubmit">确定</div>
    </div>
  </div>
</template>
<script>
import { goodsDetails, goodsAttrs } from 'api/goods'
import { reviewsData } from 'api/reviews'
import { addFavDate } from 'api/fav'
import { TweenMax } from 'gsap'
import { mapMutations, mapState, mapActions } from 'vuex'

export default {
  name: 'goods-item',
  data () {
    return {
      details: {},
      reviews: [],
      totalReviews: 0,
      attrs: [],
      isPanel: false,
      count: 1,
      gid: this.$route.query.gid || '',
      bannerOptions: {
        loop: false,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
      }
    }
  },
  methods: {
    ...mapActions({
      loginCheck: 'user/loginCheck'
    }),
    ...mapMutations({
      add2Cart: 'cart/ADD_ITEM'
    }),
    sureSubmit () {
      let attrs = this.attrs
      for (let i = 0; i < attrs.length; i++) {
        let flag = false
        for (let j = 0; j < attrs[i].values.length; j++) {
          if (attrs[i].values[j].active) {
            flag = true
            break
          }
        }
        if (!flag) {
          this.$toast('请选择' + attrs[i].title)
          break
        }
      }
      this.addCart()
    },
    addCart () {
      if (this.isMove) {
        let goodsImg = this.$refs['goods-img'],
          goodsInfo = this.$refs['goods-info'],
          moveTarget = goodsImg.cloneNode(true),
          cartIcon = document.getElementById('cart-icon'),
          cartTop = window.innerHeight - this.$refs['cart-panel'].offsetHeight
        goodsInfo.appendChild(moveTarget)
        moveTarget.style.cssText = 'position:absolute;z-index:10;left:0.2rem;top:0.2rem;width:0.4rem;height:0.4rem;'
        this.isMove = false

        TweenMax.to(moveTarget, 0.2, { rotation: 360, repeat: -1 })
        TweenMax.to(moveTarget, 1, { opacity: 0 })
        TweenMax.to(moveTarget, 1, {
          bezier: [
            { left: moveTarget.offsetLeft, top: -100 },
            { left: cartIcon.offsetLeft, top: -cartTop }
          ],
          onComplete: () => {
            this.isMove = true
            this.closePanpel()
            moveTarget.remove()
          }
        })
        this.$toast.success('我在购物车等你哦')
        // 添加到vuex中
        // 构建购物车数据
        let attrs = []
        this.attrs.forEach((item) => {
          let attr = {}
          attr.attrid = item.attrid
          attr.title = item.title
          attr.param = []
          item.values.forEach((item2) => {
            if (item2.active) {
              attr.param.push({
                paramid: item2.vid,
                title: item2.value
              })
            }
          })
          attrs.push(attr)
        })
        let cartData = {
          'gid': this.details.gid,
          'title': this.details.title,
          'amount': this.count,
          'price': this.details.price,
          'img': this.details.images[0],
          'checked': true,
          'freight': this.details.freight,
          'attrs': attrs
        }
        this.add2Cart({ cartData: cartData })
      }
    },
    selectAttrs (index, index2) {
      this.attrs[index].values.forEach((item, i) => {
        this.attrs[index].values[i].active = false
      })
      this.attrs[index].values[index2].active = true
      this.$set(this.attrs[index].values, index2, this.attrs[index].values[index2])
    },
    getGoodsAttrs () {
      goodsAttrs(this.gid).then(res => {
        if (res.code === 200) {
          res.data.forEach((item, index) => {
            res.data[index].values.forEach((item2, index2) => {
              res.data[index].values[index2].active = false
            })
          })
          this.attrs = res.data
        } else {
          this.attrs = []
        }
      })
    },
    getDeatils () {
      goodsDetails(this.gid).then(res => {
        if (res.code === 200) {
          this.details = res.data
          document.title = this.details.title
        } else {
          this.details = []
        }
      })
    },
    getReviews () {
      reviewsData(this.gid).then(res => {
        if (res.code === 200) {
          this.totalReviews = res.pageinfo.total
          this.reviews = res.data
        } else {
          this.totalReviews = 0
          this.reviews = []
        }
      })
    },
    showPanpel () {
      this.isPanel = true
    },
    closePanpel () {
      if (this.isMove) {
        this.isPanel = false
      }
    },
    setCount (e) {
      this.count = e.target.value
      this.count = this.count.replace(/[^\d]/g, '')
      if (!this.count || this.count === '0') {
        this.count = 1
      }
    },
    async addFav () {
      if (!this.uid) {
        this.$toast('请登录会员')
        return
      } else {
        let isLogin = await this.loginCheck()
        if (!isLogin) {
          this.$toast('请登录会员')
          return
        }
      }
      let res = await addFavDate({
        uid: this.uid,
        gid: this.gid
      })
      if (res.code === 200) {
        this.$toast('收藏成功')
      } else {
        this.$toast(res.data)
      }
    }
  },
  computed: {
    ...mapState({
      uid: state => state.user.uid
    })
  },
  watch: {
    isPanel (val) {
      if (val) {
        document.documentElement.style.height = '100%'
        document.body.style.height = '100%'
        document.body.style.overflow = 'hidden'
      } else {
        document.documentElement.style.height = 'auto'
        document.body.style.height = 'auto'
        document.body.style.overflow = 'auto'
      }
    }
  },
  created () {
    this.gid = this.$route.query.gid || ''
    this.isMove = true
    this.getDeatils()
    this.getReviews()
    this.getGoodsAttrs()
  },
  beforeRouteUpdate (to, from, next) {
    this.gid = to.query.gid || ''
    this.isMove = true
    this.getDeatils()
    this.getReviews()
    this.getGoodsAttrs()
    next()
  },
  destroyed () {
  }
}
</script>

<style scoped>
  .swpier-wrap {
    width: 100%;
    height: 7rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 1.2rem;
  }

  .swpier-wrap img {
    width: 100%;
  }

  .goods-ele-main {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    margin: 0 auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .goods-ele-main .goods-title {
    width: 90%;
    font-size: 0.28rem;
    margin: 0 auto;
  }

  .goods-ele-main .price {
    color: #F93036;
    width: 90%;
    margin: 0 auto;
    margin-top: 0.2rem;
    font-size: 0.32rem;
  }

  .goods-ele-main .sales-wrap {
    width: 90%;
    margin: 0 auto;
    font-size: 0.24rem;
    color: #969696;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin-top: 0.2rem;
  }

  .reviews-main {
    width: 100%;
    background-color: #FFFFFF;
    margin-top: 0.5rem;
    overflow: hidden;
    padding-bottom: 1.7rem
  }

  .reviews-main .reviews-title {
    color: #7b7f82;
    font-size: 0.32rem;
    width: 90%;
    margin: 0 auto;
    margin-top: 0.2rem;
  }

  .reviews-main .reviews-wrap {
    width: 90%;
    margin: 0 auto;
  }

  .reviews-main .reviews-wrap .reviews-list {
    width: 100%;
    margin-top: 0.4rem;
  }

  .reviews-main .reviews-list .uinfo {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    height: 0.6rem;
    align-items: center;
    -webkit-align-items: center;
  }

  .reviews-main .reviews-list .uinfo .head {
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.2rem;
  }

  .reviews-main .reviews-list .uinfo .head img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }

  .reviews-main .reviews-list .uinfo .nickname {
    width: auto;
    font-size: 0.28rem;
  }

  .reviews-main .reviews-list .reviews-content {
    width: 100%;
    margin: 0 auto;
    font-size: 0.28rem;
    margin-top: 0.2rem;
  }

  .reviews-main .reviews-list .reviews-date {
    width: auto;
    font-size: 0.28rem;
    color: #7b7f82;
    margin-top: 0.2rem;
  }

  .reviews-main .reviews-more {
    width: 2.44rem;
    height: 0.56rem;
    border: solid 1px #D50A17;
    line-height: 0.56rem;
    text-align: center;
    font-size: 0.28rem;
    margin: 0 auto;
    margin-top: 0.5rem;
    border-radius: 0.1rem;
  }

  .bottom-btn-wrap {
    width: 100%;
    height: 1.2rem;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    display: flex;
    display: -webkit-flex;
  }

  .bottom-btn-wrap .btn {
    width: auto;
    height: 100%;
    flex: 1;
    -webkit-flex: 1;
    font-size: 0.36rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.2rem;
  }

  .bottom-btn-wrap .btn.fav {
    background-color: #FCB40A;
  }

  .bottom-btn-wrap .btn.cart {
    background-color: #CC0004;
  }

  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.3)
  }

  .cart-panel {
    width: 100%;
    height: 60%;
    position: fixed;
    z-index: 12;
    left: 0px;
    bottom: 0px;
    background-color: #f5f5f9;
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s
  }

  .cart-panel.down {
    transform: translateY(120%);
    -webkit-transform: translateY(120%);
  }

  .cart-panel.up {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }

  .cart-panel .goods-info {
    width: 98%;
    height: 1.22rem;
    border-bottom: #EFEFEF solid 1px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    padding-left: 0.2rem;
    position: relative;
    z-index: 1;
    background-color: #FFFFFF;
  }

  .cart-panel .goods-info .goods-img {
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.3rem;
  }

  .cart-panel .goods-info .goods-img img {
    width: 100%;
    height: 100%;
  }

  .cart-panel .goods-info .goods-wrap {
    width: 80%;
    height: auto;
  }

  .cart-panel .goods-info .goods-wrap .goods-title {
    width: 100%;
    height: 0.7rem;
    font-size: 0.24rem;
    overflow: hidden;
  }

  .cart-panel .goods-info .goods-wrap .price {
    color: #F93036;
    font-size: 0.24rem;
  }

  .cart-panel .goods-info .goods-wrap .goods-code {
    color: #888888;
    font-size: 0.24rem;
    position: absolute;
    z-index: 1;
    right: 0.2rem;
    bottom: 0px;
  }

  .cart-panel .close-panel-wrap {
    width: 0.6rem;
    height: 1.2rem;
    position: absolute;
    right: -0.2rem;
    top: -1rem;
    z-index: 2;
  }

  .cart-panel .close-panel-wrap .spot {
    width: 0.12rem;
    height: 0.12rem;
    position: absolute;
    z-index: 1;
    bottom: 0px;
    left: 0px;
    background-color: #000000;
    border-radius: 100%;
  }

  .cart-panel .close-panel-wrap .line {
    width: 1px;
    height: 0.72rem;
    background-color: #FFFFFF;
    position: absolute;
    z-index: 1;
    left: 0.05rem;
    bottom: 0.05rem;
  }

  .cart-panel .close-panel-wrap .close {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url('../../../assets/images/home/goods/x.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: -0.14rem;
    top: 0.1rem;
    z-index: 1;
  }

  .cart-panel .attr-wrap {
    width: auto;
    max-height: 3.5rem;
    padding-left: 0.2rem;
    background-color: #FFFFFF;
    overflow-y: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
  }

  .cart-panel .attr-wrap .attr-list {
    width: 100%;
    height: auto;
    margin-top: 0.2rem;
  }

  .cart-panel .attr-list .attr-name {
    width: auto;
    font-size: 0.32rem;
  }

  .cart-panel .attr-list .val-wrap {
    width: auto;
    margin-top: 0.2rem;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .cart-panel .attr-list .val-wrap .val {
    background: #EFEFEF;
    font-size: 0.32rem;
    padding: 0.1rem 0.2rem;
    border-radius: 0.1rem;
    margin-right: 0.17rem;
    display: table;
    margin-bottom: 0.17rem;
  }

  .cart-panel .attr-list .val-wrap .val.active {
    color: #FFFFFF;
    background-color: #FDA208;
  }

  .cart-panel .amount-wrap {
    width: auto;
    padding-left: 0.2rem;
    padding-top: 0.2rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    height: 0.64rem;
    align-items: center;
    -webkit-align-items: center;
    background-color: #FFFFFF;
    padding-bottom: 0.3rem;
  }

  .cart-panel .amount-wrap .amount-name {
    width: auto;
    font-size: 0.32rem;
  }

  .cart-panel .amount-wrap .amount-input-wrap {
    width: 2.04rem;
    height: 0.64rem;
    border: 1px solid #000000;
    margin-right: 0.2rem;
    border-radius: 0.08rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .cart-panel .amount-wrap .amount-input-wrap .btn {
    width: 0.6rem;
    height: 0.4rem;
    font-size: 0.32rem;
    text-align: center;
    line-height: 0.4rem;
  }

  .cart-panel .amount-wrap .amount-input-wrap .btn.active {
    color: #B5B5B5;
  }

  .cart-panel .amount-wrap .amount-input-wrap .dec {
    border-right: 1px solid #000000;
  }

  .cart-panel .amount-wrap .amount-input-wrap .amount-input {
    width: 0.76rem;
    height: 100%;
  }

  .cart-panel .amount-wrap .amount-input-wrap .amount-input input {
    width: 100%;
    height: 95%;
    text-align: center;
  }

  .cart-panel .amount-wrap .amount-input-wrap .inc {
    border-left: 1px solid #000000;
  }

  .cart-panel .sure-btn {
    width: 100%;
    height: 0.8rem;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    color: #FFFFFF;
    font-size: 0.32rem;
    background-color: #CF0005;
    text-align: center;
    line-height: 0.8rem;
  }

  .no-data {
    padding: 0.3rem 0.4rem 0;
  }

</style>
